<template>
    <a-card title="门禁终端" :bordered="false">
        <!-- Card Header -->
        <a-form layout="inline" @submit.prevent="searchSubmit" class="margin-b-1rem">
            <a-row>
                <a-col :span="20">
                    <a-form-item>
                        <a-input v-model="searchForm.name" placeholder="门禁名称"/>
                    </a-form-item>
                    <a-form-item>
                        <a-input v-model="searchForm.clientMac" placeholder="终端MAC"></a-input>
                    </a-form-item>
                    <a-form-item>
                        <a-input v-model="searchForm.clientIp" placeholder="终端IP"></a-input>
                    </a-form-item>
                    <a-form-item>
                        <a-input v-model="searchForm.remark" placeholder="备注"/>
                    </a-form-item>
                </a-col>
                <a-col :span="4">
                    <a-form-item>
                        <a-button icon="search" type="primary" html-type="submit">搜索</a-button>
                    </a-form-item>
                    <a-form-item>
                        <a-button icon="plus" type="danger" @click="openEdit()">新建</a-button>
                    </a-form-item>
                </a-col>
            </a-row>
        </a-form>
        <a-table bordered
                 :columns="columns"
                 :rowKey="record => record.id"
                 :dataSource="dataSource"
                 :pagination="pagination"
                 :loading="loading"
                 @change="handleTableChange">
            <template slot="masterName" slot-scope="text, record">
                <span v-if="text">{{text}}</span>
                <span v-else class="text-danger">#NA</span>
            </template>
            <template slot="status" slot-scope="text, record">
                {{ $exMod.findDict(PassWayStatusOPT,text) }}
            </template>
            <!-- 操作插槽 -->
            <template slot="operation" slot-scope="text, record">
                <a @click="()=>{
					StaffModalShow=true;
					StaffWayRecord=record;
				}">查看</a>
                <a-divider type="vertical"/>
                <a @click="()=>{
					 MasterModalShow=true;
					 MasterModalRecord=record;
				}"> 管理员 </a>
                <a-divider type="vertical"/>
                <a-dropdown>
                    <a class="ant-dropdown-link"> 操作
                        <a-icon type="down"/>
                    </a>
                    <a-menu slot="overlay">
                        <a-menu-item>
                            <a href="javascript:void(0);" @click="initPassWay(record)">初始化</a>
                        </a-menu-item>
                        <a-menu-item>
                            <a href="javascript:void(0);" @click="openEdit(record)"> 编辑 </a>
                        </a-menu-item>
                        <a-menu-item>
                            <a href="javascript:void(0);" @click="delPlaceWay(record)"> 删除 </a>
                        </a-menu-item>
                    </a-menu>
                </a-dropdown>
            </template>
        </a-table>
        <EditBox v-if="editShow" @closeFun="closeEdit" :editRecord="editRecord"/>
        <StaffModal v-if="StaffModalShow"
                    @closeModal="(e)=>{StaffModalShow=false;StaffWayRecord={} }"
                    :objRecord="StaffWayRecord"/>
        <MasterModal v-if="MasterModalShow"
                     :objRecord="MasterModalRecord"
                     @closeModal="(e)=>{MasterModalShow=false;MasterModalRecord={} ; getTableList()  }"/>
    </a-card>
</template>
<script>
import {dictLoad} from '../../../util/internal.api';
import {pagination, wayTable} from '../public/colums';
import {wayList, wayDel, wayInit} from '../public/http';
export default {
    components: {
        EditBox: () => import('./edit'),
        StaffModal: () => import('./StaffModal'),
        MasterModal: () => import('./MasterModal'),
    },
    data() {
        return {
            editShow: false, //打开编辑器
            editRecord: {}, //正在编辑的记录
            StaffModalShow: false,
            StaffWayRecord: {}, //正在打开的门禁
            MasterModalShow: false,  //管理员设置窗口
            MasterModalRecord: {}, 	  //管理员窗口记录
            dataSource: [],
            pagination: {...pagination}, //复制预设的分页参数
            loading: false, //表格loading
            columns: wayTable, //表头管理
            searchForm: {
                code: '',
                name: '',
                remark: '',
                status: ''
            },
            //场地字典选项列表
            PassWayStatusOPT: [], //门禁终端状态字典
            searchExpand: false
        };
    },
    methods: {
        //1.0 获取表格数据
        getTableList() {
            this.loading = true;
            let searchData = this.$exMod.filterObjEmpty(this.searchForm); //删除对象中的空值
            wayList(this.pagination, searchData).then(res => {
                this.loading = false;
                if (res.code === 0) {
                    this.dataSource = res.data.result; //表格数据
                    this.pagination.total = res.data.total; //总记录条数
                }
            });
        },
        //1.2翻页监听
        handleTableChange(pagination) {
            this.pagination.current = pagination.current;
            this.pagination.pageSize = pagination.pageSize;
            this.getTableList();
        },
        //2.0打开编辑器
        openEdit(obj = {}) {
            this.editRecord = obj;
            this.editShow = true;
        },
        //2.1 关闭编辑器
        closeEdit(e) {
            this.editShow = false;
            if (e.render) {
                this.getTableList();
            }
        },
        //3.0 搜索提交
        searchSubmit() {
            this.pagination.current = 1;
            this.getTableList();
        },
        delPlaceWay(record) {
            const _this = this;
            this.$confirm({
                width: 450,
                title: `确定要删除门禁 ${record.name} 吗?`,
                content: '删除门禁将会同删除门禁相关的通行通行授权。',
                onOk() {
                    wayDel(record.clientMac).then(res => {
                        _this.ajaxMessage(res);
                        if (res.code === 0) {
                            _this.getTableList();
                        }
                    })
                },
            });
        },
        initPassWay(record) {
            const _this = this;
            this.$confirm({
                width: 450,
                title: `确定要初始化 ${record.name} 吗?`,
                content: '初始化门禁终将会清除管理员以外的人员的通行授权。',
                onOk() {
                    wayInit(record.clientMac).then(res => {
                        _this.ajaxMessage(res);
                        if (res.code === 0) {
                            _this.getTableList()
                        }
                    })
                },
            });
        },
        ajaxMessage(res) {
            let message, type;
            if (res.code === 0) {
                type = "success";
                message = "操作成功"
            } else {
                type = "error";
                message = "操作失败";
            }
            this.$notification[type]({
                message: message,
                description: res.message
            });
        },
        //数据初始化
        async init() {
            //状态
            await dictLoad('PassWayStatus').then(res => (this.PassWayStatusOPT = res));
            this.getTableList();
        }
    },
    created() {
        this.init();
    }
};
</script>
